<template>
  <div class="copy-unit-table">
    <div v-if="!disabled">
      <el-button
        type="primary"
        size="small"
        icon="Plus"
        @click="copyUnitDialog.show(model)"
      >
        添加
      </el-button>
    </div>
    <Table
      :data="model"
      :select-column="false"
      @selection-change="handleSelectedChange"
    >
      <TableColumn label="抄送单位" align="left" header-align="left">
        <template #default="{ row }">
          {{
            unitStore.list.find((item) => {
              return item.id === row
            })?.name
          }}
        </template>
      </TableColumn>
    </Table>
    <CopyUnitDialog ref="copyUnitDialog" @add="handleUpdateUnit" />
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table/Table.vue'
import TableColumn from '@/components/table/TableColumn.vue'
import useUnitStore from '@/stores/unit'
import { ref, useTemplateRef } from 'vue'
import CopyUnitDialog from '@/views/mission/task/thing/CopyUnitDialog.vue'

const unitStore = useUnitStore()
const copyUnitDialog =
  useTemplateRef<InstanceType<typeof CopyUnitDialog>>('copyUnitDialog')

const { disabled } = defineProps<{
  disabled: boolean
}>()

const selectedData = ref([])
const model = defineModel<any[]>()

function handleSelectedChange(rows: any[]) {
  selectedData.value = rows
}

function handleUpdateUnit(rows: any[]) {
  model.value = rows
}
</script>

<style scoped lang="scss">
.copy-unit-table {
  width: 100%;
}
</style>
